<script setup>
  import { ref, computed, watch, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import { setLocale } from '@/utils'
  import { useI18n } from 'vue-i18n'

  import loading from './components/loading/loading.vue'
  import TabBar from './components/tab-bar/tab-bar.vue'

  const router = useRouter()
  const route = useRoute()
  const store = useStore()

  const { locale } = useI18n()
  const setLanguage = (e) => {
    locale.value = e
  }

  const transition = ref(true) // 设移入方向
  const newTransition = ref(0) // 底部导航栏判断当前 transition 应该已什么方向移出
  const inTransition = ref(false) // 设置fixed 平移
  const inSetTimeout = ref() // 倒计时解除 fixed

  const language = computed(() => {
    return store.state.language
  })
  const isFirstRouter = computed(() => {
    return store.state.isFirstRouter
  })
  const isThirdRouter = computed(() => {
    return store.state.isThirdRouter
  })

  const isShowFooter = computed(() => {
    return route.meta.showFooter
  })
  const isShowHeader = computed(() => {
    return route.meta.showHeader
  })
  const backGround = computed(() => {
    return route.meta.backGround
  })

  // 旧设置 是否显示返回，设置标题，设置字体颜色
  // const showBack = computed(() => {return route.meta.showBack})
  // const title = computed(() => {return route.meta.title})
  // const color = computed(() => {return route.meta.color})
  // const fontColor = computed(() => {return route.meta.fontColor})

  const includeList = ref([]) // keepAlive

  const jump = (row) => {
    row.top > newTransition.value ? (transition.value = false) : (transition.value = true)
    router.push(row.path)
  }
  watch(
    () => language.value,
    (newV) => {
      setLanguage(newV)
    }
  )
  // 监听一级跳转
  watch(
    () => isFirstRouter.value,
    (newV) => {
      if (newV) {
        jump(newV)
        setTimeout(() => {
          store.commit('change_first_router', '')
        }, 600)
      }
    },
    { immediate: true }
  )

  // 监听三级跳转
  watch(
    () => isThirdRouter.value,
    (newV) => {
      console.log(newV)
      if (newV) {
        transition.value = false
        setTimeout(() => {
          store.commit('change_third_router', false)
        }, 600)
      }
    },
    { immediate: true }
  )

  // 监听当前的页面判断transition移动方向
  watch(
    () => router.currentRoute.value,
    (newValue, oldValue) => {
      inTransition.value = true
      if (inSetTimeout.value) {
        clearTimeout(inSetTimeout.value)
        inSetTimeout.value = setTimeout(() => {
          inTransition.value = false
        }, 600)
      } else {
        inSetTimeout.value = setTimeout(() => {
          inTransition.value = false
        }, 600)
      }

      if (newValue.meta.keepAlive && newValue.meta.transition) {
        // console.log(newValue.meta.transition)
        // console.log(oldValue.meta.transition)
        newValue.meta.transition > oldValue.meta.transition
          ? (transition.value = true)
          : (transition.value = false)

        newTransition.value = newValue.meta.transition

        setTimeout(() => {
          transition.value = false
        }, 500)
      } else {
        if (oldValue && newValue.meta.level == 2) {
          newValue.meta.level > oldValue.meta.level
            ? (transition.value = true)
            : (transition.value = false)
        } else if (oldValue && newValue.meta.level == 1 && oldValue.meta.level == 2) {
          transition.value = false
          setTimeout(() => {
            transition.value = true
          }, 500)
        } else {
          transition.value = true
        }
      }
      if (newValue.meta.keepAlive && includeList.value.indexOf(newValue.name) === -1) {
        includeList.value.push(newValue.name)
      }
    },
    { immediate: true }
  )

  onMounted(() => {
    setLocale(language.value)
  })
</script>

<template>
  <loading />
  <!-- <div 
      class="container is-ios-tab"
      :class="{'is-show-header': isShowHeader, 'is-show-footer': isShowFooter }"
      :style="{backgroundColor:backGround?backGround:'#ffffff'}"
      > -->
  <div
    class="container is-ios-tab"
    :style="{ background: backGround }"
    :class="{ isFixed: inTransition }"
  >
    <!-- 头部 -->
    <!-- <transition name="top-fade">
    <app-bar v-if="isShowHeader" :color=color :fontColor=fontColor :showBack="showBack">
      <template v-slot:title>
        <p>{{title}}</p>
      </template>
    </app-bar>
    </transition> -->

    <!-- keepAlive 存活 -->
    <router-view
      v-slot="{ Component }"
      class="view"
      :class="{
        isFixed: inTransition,
        'is-show-header': isShowHeader,
        'is-show-footer': isShowFooter
      }"
      :style="{ background: backGround }"
    >
      <!-- <template v-if="Component"> -->
      <transition :name="!transition ? 'slide-fade-right' : 'slide-fade-left'">
        <keep-alive :include="includeList">
          <suspense>
            <template #fallback>
              <div class="loading">Loading...</div>
            </template>
            <component :is="Component"></component>
          </suspense>
        </keep-alive>
      </transition>
      <!-- </template> -->
    </router-view>
  </div>
  <!-- 底部 -->
  <transition name="bottom-fade">
    <tab-bar v-show="isShowFooter" @jump="jump"></tab-bar>
  </transition>
</template>

<style lang="scss">
  @import '@/style/transition.scss';

  * {
    margin: 0;
    padding: 0;
  }
  // 设置最大rem转换
  // @media (min-width: 768px){
  //   html{
  //     font-size: 82px!important;
  //   }
  // }
  #app {
    font-size: 14px;
    text-align: center;
    font-family: Source Han Sans CN;
    color: var(--color);
    background: var(--bgcolor);
  }
  .view {
    position: relative;
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--bgcolor);
    left: 0;
    top: 0;
    &.isFixed {
      position: fixed;
    }
    &.is-show-header {
      padding-top: var(--app-height);
      min-height: 100vh;
    }
    &.is-show-footer {
      padding-bottom: var(--tab-height);
      min-height: 100vh;
    }
  }
  .container {
    position: relative;
    width: 100vw;
    height: 100%;
    overflow: auto;
    &.isFixed {
      height: 100vh;
      overflow: hidden;
    }
  }
</style>
